<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <title>NCUT 猫</title>
    <!-- jquery -->
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/jquery.form.js"></script>
    <!-- popper -->
    <script src="./lib/popper.min.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="./lib/bootstrap.min.css">
    <link rel="stylesheet" href="./lib/bootstrap-theme.min.css">
    <script src="./lib/bootstrap.min.js"></script>
    <script src="./lib/bootstrap.bundle.min.js"></script>
    <!-- vue -->
    <script src="./lib/vue.js"></script>
    <!-- js -->
    <script src="./js/ConstData.js"></script>
    <script src="./js/main.js"></script>
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="./css/mainFrame.css">
    <link rel="stylesheet" type="text/css" href="./css/cat_rank.css">
    <!-- icon -->
    <script src="./icon/iconfont.js"></script>
    <style type="text/css">
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
    </style>
</head>

<body>
    <a class="title" href="feed.html#cat_rank"><b>&lt;</b>&nbsp;&nbsp;猫咪人气榜单</a>
    <h1>猫咪人气周榜</h1>
    <a class="title title-right" href="cat_rank_rule.html">活动规则&nbsp;&gt;&gt;&gt;</a>
    <br>
    <span class="module-list">
        <span class="module rank-line" id="rankList">
            <!-- 排行榜, 应改为JS添加 -->
            <span v-for="cat in list_3()" :class="`module rank `+cat.rankIco"><img class="sketch" :src="cat.img"><span class="name">{{cat.name}}</span><span class="hot">{{cat.hot}}</span><span class="ranking">{{cat.index}}</span><button type="button" class="btn">投喂</button></span>
            <div v-if="cat_list.length>3">---------------</div>
            <span  v-for="cat in list_other()" class="module rank"><img class="sketch" :src="cat.img"><span class="name">{{cat.name}}</span><span class="hot">{{cat.hot}}</span><span class="ranking">{{cat.index}}</span><button type="button" class="btn">投喂</button></span>
        </span>
    </span>
    <script type="text/javascript">
    $(() => {
        const defImg = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3729149452,3199545084&fm=26&gp=0.jpg";
        $rankList = new Vue({
            el: "#rankList",
            data: { cat_list: [] },
            methods: {
                list_3: function() {
                    let order = [{ o: 2, r: 's' }, { o: 1, r: 'f' }, { o: 3, r: 't' }];
                    let arr = [];
                    for (let x in order) {
                        x = order[x];
                        if (x.o > this.cat_list.length) arr.push({ rankIco: `${x.r}-rank`, img: defImg, name: `就${this.cat_list.length}只`, hot: '暂无', index: x.o });
                        else {
                            let hot = this.cat_list[x.o - 1];
                            let cat = all_cats_info[hot.id];
                            arr.push({ rankIco: `${x.r}-rank`, img: '/img/cat/' + cat.aa, name: cat.b || cat.c || "还没有起名字", hot: hot.val, index: x.o });
                        }
                    }
                    return arr;
                },
                list_other: function() {
                    let arr = this.cat_list.slice(3);
                    for (let i = 0; i < arr.length; i++) {
                        let cat = all_cats_info[arr[i].id];
                        let hot = arr[i].val;
                        arr[i] = { img: '/img/cat/' + cat.aa, name: cat.b || cat.c || "还没有起名字", hot: hot, index: i + 4 };
                    }
                    return arr;
                }
            }
        });
        (async () => {
            let data = await $.get('/cats/hot');
            let arr = [];
            for (let id in data) arr.push({ id: id, val: data[id] });
            arr.sort((a, b) => b.val - a.val);
            $rankList.cat_list = arr;
        })();
    });
    </script>
</body>

</html>